// 100之内的奇数
<template>
	<view class="content">
		<custom-navigation :title="title" rightTxt="重新开始" @rightAction="init()"></custom-navigation>
		<view class="hr"></view>
		<!-- <view class="text-area">
			<text class="title">10之内的加法</text>
		</view> -->
		<view class="error-count" v-if="errorCount"> 
			错题数:<text>{{errorCount}}</text>
		</view> 
		<h5 v-if="answer.length">剩余问题个数:{{answer.length}}</h5>
		<h5 v-else>问题已全部答完!</h5>
		<table v-if="item">
			<tr>
				<td>问题:</td>
				<td colspan="2" style="width: 150px;">{{item.key}}=<text style="width: 60px;">{{item.res===''?'?':item.res}}</text></td>
				<td style="width: 70px;" :class="{red:item.status=='错误',green:item.status=='正确'}">{{item.status}}</td>
			</tr>
			<tr>
				<td td colspan="2">答案如下</td>
				<td colspan="2">
					<button type="primary" @click="next_item()">下一题</button>
				</td>
			</tr>
			<tr>
				<td colspan="7">
					<view class="list">
						<view class="tcenter inline2" :class="(index%2==1?'inline2':'')" v-for="(item,index) in answer" @click="request(item,index)">
							<!-- <text class="tcenter"> -->
							{{item}}
							<!-- </text> -->
						</view>
					</view>
				</td>
			</tr>
		</table>
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation/custom-navigation.vue";
	export default {
		components: {
			customNavigation
		},
		data() {
			return {
				title: '100之内的奇数',
				data1:[],
				data1_del:[],
				item:null,
				answer:[],
				errorCount:0
				
			}
		},
		onLoad() {
			// 操作数据
			this.init();
			console.error('this.data1:',JSON.stringify(this.data1))
		},
		onReady() {
			// setTimeout(()=> {this.init();}, 3000);
			this.init()
		},
		methods: {
			play(text){
				// http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=你好啊，听起来好憨啊"
				// https://fanyi.sogou.com/reventondc/synthesis?text=a&speed=1&lang=zh-CHS&from=translateweb&speaker=6
				// new Audio("http://tts.youdao.com/fanyivoice?word=你好，我是你好&le=zh&keyfrom=speaker-target").play();
				new Audio("http://tts.youdao.com/fanyivoice?word="+text+"&le=zh&keyfrom=speaker-target").play();
			},
			init(){
				this.errorCount = 0;
				try {
					const pages = getCurrentPages()
					const page = pages[pages.length - 1]
					this.title = page.$holder.navigationBar.titleText;
				} catch (error) {
					
				}
				this.item=null;
				let answer = [];
				for (var i = 3; i <= 100; i++) {
					if(i%2==1){
						answer.push(i);
					}
				}
				const randomArr = (arr) => {
				  for (let i = 0; i < arr.length; i++) {
				    const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i;
				    [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
				  }
				  return arr
				};
				this.answer = randomArr(answer);
				this.data1 = [];
				for (var i = 100; i > 0; i--) {
					// 2*n-1  1,3
					let n = 2*i-1;
					if(n<=100){
						this.data1.unshift({key:(n+'+'+2),status:'',res:''});
					}
				}
				this.next_item();
				this.$forceUpdate();
			},
			request(val,index){
				if(!this.item.status){
					this.set_status(this.item.key,val,index);
				}
			},
			//设置答案
			set_status(key,val,index){
				// console.error({key,val})
				let bobao = this.$textPlay(key+'='+val);
				for (var i = 0; i < this.data1.length; i++) {
					const item = this.data1[i];
					if(key == item.key){
						if(eval(key) == val){
							item.res = val;
							item.status = '正确';
							this.data1_del.push(item);
							this.answer.splice(index,1);
							this.play(bobao +'恭喜你回答' +item.status)
							// this.data1.splice(i,1);
							// i--;
							// continue;
							setTimeout(()=> {this.next_item()}, 4000);
						} else {
							item.res = val;
							item.status = '错误';
							this.play(bobao +'很遗憾回答' + item.status);
							this.errorCount++;
							setTimeout(()=> {this.next_item()}, 4000);
						}
					}
				}
			},
			// 获取剩下的随即值
			get_item(){
				let i = parseInt(Math.random()*100000);
				i = i%this.data1.length;
				if(this.data1[i]){
					this.data1[i].res='';
					this.data1[i].status='';
					this.item = this.data1[i];
				}
			},
			// 获取剩下的随即值
			next_item(){
				if(this.item){
					if(this.item.status == '正确'){
						for (var i = 0; i < this.data1.length; i++) {
							if(this.data1[i].key == this.item.key) {
								if(this.data1[i+1]){
									this.item = this.data1[i+1];
									break;	
								}
							}
						}
					} else {
						this.item.status ='';
						this.item.res ='';
					}
				} else {
					this.item = this.data1[0];
				}
			}
		}
	}
</script>

<style>
	.tcenter{
		text-align: center;
		width: 100%;
		/* border-bottom: 1px solid #8f8f94; */
	}
	.content{
		font-size: 30px;
	}
	.list{
		/* border: 1px solid #8f8f94; */
		width: auto;
		height: 70vh;
		/* display: flex; */
		flex-direction: column;
		flex: 1;
		overflow:scroll;
	}
	.inline1{
		display: inline;
	}
	.inline2{
		display: inline-block;
		width: 48%;
		margin: 3px;
		background-color: bisque;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
